<template>
  <!-- 设备产量统计 -->
  <div class="centerTwo">
    <h1>设备产量统计</h1>
    <div class="centerEcharts">
      <div v-if="list.length > 0" id="equipProduce" class="allWidthHeight" />
      <div v-else class="kong">暂无数据</div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      myChart: null,
      list: []
    }
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize()
    },
    /* 获取设备产量统计 */
    async getEquipProduce() {
      const res = await this.$axios.get('/board/composite/equipProduce')
      if (res.data.code === 200) {
        this.list = res.data.data
        let data = {
          equipNameList: [],
          produceNumList: []
        }
        setTimeout(async () => {
          res.data.data.forEach((item) => {
            data.equipNameList.push(item.equipName)
            data.produceNumList.push(item.produceNum)
          })
          this.eqLine(data)
        }, 500)
      }
    },
    /* 设备统计echarts */
    eqLine(data) {
      const option = {
        grid: {
          left: '10%', // 距离左侧的距离
          right: '10%', // 距离右侧的距离
          top: '10%', // 距离顶部的距离
          bottom: '10%' // 距离底部的距离
        },
        xAxis: {
          splitLine: { show: false },
          axisLine: {
            // 坐标轴 轴线
            lineStyle: {
              color: '#1C0768',
              width: 1,
              type: 'solid'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            fontWeight: 'bold'
          },
          type: 'category',
          data: data.equipNameList
        },
        yAxis: {
          axisLabel: {
            color: '#fff',
            fontWeight: 'bold'
          },
          splitLine: { show: false },
          type: 'value'
        },
        series: [
          {
            data: data.produceNumList,
            type: 'line',
            lineStyle: {
              color: '#3FADFE', //
              width: 3 // 线条宽度
            },
            smooth: true,
            symbol: 'none' // 设置为 'none' 去掉线上的点
          }
        ]
      }
      if (
        this.myChart != null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose() // 销毁
      }
      this.myChart = echarts.init(document.getElementById('equipProduce'))
      this.myChart.clear()
      this.myChart.setOption(option, true)
    }
  }
}
</script>
<style lang='scss' scoped>
.centerTwo {
  height: 33.333%;
  padding: 0 10px;
  h1 {
    font-size: 18px;
    color: #fff;
    height: 35px;
    font-weight: normal;
    margin: 0;
  }
  .centerEcharts {
    height: calc(100% - 35px);
    background: rgba(55, 136, 255, 0.1);
  }
}
</style>
